<template>
  <a-modal
      :title="title"
      :width="640"
      :visible="visible"
      v-if="visible"
      :confirmLoading="confirmLoading"
      @ok="handleSubmit"
      @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
            label="姓名"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-input
              autocomplete="off"
              :maxLength="20"
              v-decorator="['realName', {rules: [
              {required: true, message: '请输入姓名'}, {max: 20, message: '姓名不超过20个字符'}
            ]}]"/>
        </a-form-item>

        <a-form-item
            label="用户名"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-if="action=='add'"
        >
          <a-input
              autocomplete="off"
              :maxLength="20"
              v-decorator="['username', {rules: [
              {required: true, message: '请输入姓名'}, {max: 20, message: '姓名不超过20个字符'}
            ]}]"/>
        </a-form-item>
        <a-form-item
            label="密码"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            v-if="action=='add'"
        >
          <a-input
              type="password"
              :max-length="20"
              v-decorator="[
            'password',
            {rules: [{ required: true, message: '请输入新密码' },
             {pattern: /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^[^\s\u4e00-\u9fa5]{6,20}$/, message:'密码为6-20个字符，包含字母、数字、特殊字符，区分大小写。\n'+'不支持空格。'}],
             validateTrigger: ['change', 'blur']}
          ]"
          />
        </a-form-item>


        <a-form-item
            label="角色"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol">
          <a-select
              v-decorator="rolesDecorator"
              mode="multiple"
              showSearch
              optionFilterProp="children"
          >
            <a-select-option :value="i.id" v-for="i in roles" :key="i.id">
              {{ i.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {saveUser} from '@/services/user'

export default {
  name: 'UserForm',
  props: {
    roles: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {},
  data() {
    return {
      confirmLoading: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 7}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 13}
      },
      loading: false,
      imageUrl: '',
      imageUrlReactive: '',
      visible: false,
      rolesDecorator: ['roleIdList', {initialValue: []}],
      form: this.$form.createForm(this),
      action: 'add',
      queryParam: {},
      config: {
        info: true,
        fixedNumber: [500, 500],
        fixedBox: false,
        autoCropWidth: 500,
        autoCropHeight: 500
      }
    }
  },
  computed: {
    title() {
      return (this.action === 'add' ? '新建' : '修改') + '客户'
    }
  },
  methods: {
    // 新增
    add(e) {
      this.queryParam = {}
      e ? this.queryParam.source = 1 : this.queryParam.source = 0
      this.visible = true
      this.action = 'add'
      this.loading = false
    },
    // 编辑
    edit(record) {
      this.visible = true
      this.action = 'edit'
      this.queryParam = {...record}
      const param = {
        realName: this.queryParam.realName,
        roleIdList: this.queryParam.roleIdList
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(param)
      })
      this.loading = false
    },
    // 提交
    handleSubmit() {
      const {form: {validateFields}} = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          this.queryParam = {...this.queryParam, ...values}//Object.assign({}, )
            this.addUser(this.queryParam)
        } else {
          this.confirmLoading = false
        }
      })
    },
    addUser(params) {
      saveUser(params).then(res => {
        const {
          message, code
        } = res.data
        if (200 === code) {
          this.handleCancel()
          this.$message.success(message)
          this.$emit('ok', res)
        } else {
          this.$message.error(message)
        }
      }).catch(({message}) => {
        this.$message.error(message)
        // eslint-disable-next-line no-unused-vars
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    // 取消
    handleCancel() {
      this.imageUrl = ''
      this.imageUrlReactive = ''
      this.visible = false
      this.confirmLoading = false
    }
  },
  mounted() {

  }
}
</script>
<style>
.avatar {
  max-width: 100px;
  max-height: 100px
}
</style>
